import React from 'react';
import {
    View,
    Image,
    Text,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';
import config from '../../../config';

const styles = StyleSheet.create({
    container: {
        width: '100%',
        paddingVertical: 8,
        backgroundColor: '#fff',
        flexDirection: 'row',
        justifyContent: 'flex-start',
    },
    image: {
        width: 46,
        height: 46,
        borderRadius: 2,
        backgroundColor: 'red',
    },
    content: {
        flex: 1,
        marginHorizontal: 10,
        justifyContent: 'center',
    },
    title: {
        fontSize: config.middleFontSize,
        color: '#000',
    },
    subTitle: {
        marginTop: 6,

        fontSize: config.defaultFontSize,
        color: '#aaaaaa',
        textAlign: 'justify',
    },
    time: {
        fontSize: config.smallFontSize,
        color: config.subTextColor,
        alignSelf: 'flex-end',
    },
});

const DocItem = ({ title, subTitle, timeStr, onPress }) => {
    let showSubTitle = subTitle.length > 20 ? `${subTitle.slice(0, 20)}...` : subTitle
    return (
        <TouchableOpacity
            activeOpacity={0.7}
            onPress={() => onPress && onPress()}
            style={styles.container}
        >
            <View style={styles.content}>
                <View style={{ flexDirection: 'row', justifyContent: 'space-between', }}>
                    <Text style={styles.title}>{title}</Text>
                    <Text style={styles.time}>{timeStr}</Text>
                </View>
                <Text
                    ellipsizeMode={'clip'}
                    numberOfLines={1}
                    style={styles.subTitle}
                >{showSubTitle}</Text>
            </View>
        </TouchableOpacity>
    )
}



export default DocItem